<template>
  <div class="lb-goods-list">
    <top-nav />
    <div class="page-main">
      <el-row class="page-top-operate">
        <lb-button
          size="medium"
          type="primary"
          icon="el-icon-plus"
          opType="add"
          @click="
            () => {
              this.dialogFormVisible = true
            }
          "
          >新建模板</lb-button
        >
      </el-row>
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        style="width: 100%"
      >
        <!-- <el-table-column prop="id" label="ID">
        </el-table-column> -->
        <el-table-column prop="diy_name" label="名称" width="400">
          <template slot-scope="scope">
            <div class="flex-between" v-if="editIndex == scope.$index">
              <el-input
                v-model="scope.row.diy_name"
                size="small"
                style="width: 200px"
              ></el-input>
              <div class="flex-warp">
                <el-button size="small" @click="cancelEditTitle"
                  >取消</el-button
                >
                <el-button
                  size="small"
                  type="primary"
                  @click="editTitle(scope.$index)"
                  >确定</el-button
                >
              </div>
            </div>
            <div
              @click="selectEditIndex(scope.$index, scope.row)"
              class="cursor-pointer flex-center"
              v-else
            >
              <div>{{ scope.row.diy_name }}</div>
              <i class="iconfont iconxiugai c-link f-paragraph flex-1 ml-md">
                修改</i
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间">
          <template slot-scope="scope">
            <p>{{ scope.row.create_time | handleTime(1) }}</p>
            <p>{{ scope.row.create_time | handleTime(2) }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="address" width="300px" label="操作">
          <template slot-scope="scope">
            <div class="table-operate">
              <el-button
                size="mini"
                plain
                @click="use(scope.row.id)"
                :disabled="scope.row.status == 1"
                >{{ scope.row.status == 1 ? '使用中' : '使用' }}</el-button
              >
              <lb-button
                size="mini"
                plain
                type="primary"
                @click="$router.push('/diy/edit?id=' + scope.row.id)"
                >{{ $t('action.edit') }}</lb-button
              >
              <lb-button
                size="mini"
                plain
                type="danger"
                @click="confirmDel(scope.row.id)"
                v-if="scope.row.is_system == 0"
                >{{ $t('action.delete') }}</lb-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <lb-page
        :page="searchForm.page"
        :pageSize="searchForm.page_count"
        :batch="false"
        :total="total"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      >
      </lb-page>
    </div>

    <el-dialog
      title="新增模板"
      :visible.sync="dialogFormVisible"
      width="400px"
      center
    >
      <el-form
        @submit.native.prevent
        :model="form"
        :rules="formRules"
        ref="form"
        label-width="80px"
      >
        <el-form-item label="模板标题" prop="diy_name">
          <el-input
            v-model="form.diy_name"
            placeholder="请输入模板标题"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{
          $t('action.cancel')
        }}</el-button>
        <el-button
          type="primary"
          @click="submitFormInfo('form')"
          v-preventReClick
          >{{ $t('action.comfirm') }}</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      loading: false,
      searchForm: {
        page: 1,
        page_count: 10
      },
      tableData: [],
      total: 0,
      dialogFormVisible: false,
      form: {
        diy_name: ''
      },
      formRules: {
        diy_name: {
          required: true,
          type: 'string',
          message: '请输入模板标题',
          trigger: 'blur'
        }
      },
      editIndex: -1,
      editObj: ''
    }
  },
  created () { },
  activated () {
    this.getDiyList()
  },
  methods: {
    ...mapMutations(['changeRoutesItem']),
    handleSizeChange (val) {
      this.searchForm.page_count = val
      this.handleCurrentChange(1)
    },
    handleCurrentChange (val) {
      this.searchForm.page = val
      this.getDiyList()
    },
    /**
     * @method 获取diy列表
     */
    getDiyList (flag) {
      if (flag) this.searchForm.page = 1
      this.loading = true
      let { searchForm } = this
      this.$api.getDiyList(searchForm).then(res => {
        this.loading = false
        if (res.code === 200) {
          this.tableData = res.data.data
          this.total = res.data.total
        }
      })
    },

    /**
     * @method 删除单个diy
     * @param indexdiy下标
     * @param iddiyid
     */
    async confirmDel (id) {
      await this.$confirm(
        this.$t('tips.confirmDelete'),
        this.$t('tips.reminder'),
        {
          confirmButtonText: this.$t('action.comfirm'),
          cancelButtonText: this.$t('action.cancel'),
          type: 'warning'
        }
      )
      await this.$api.delDiy({ id })
      this.searchForm.page = this.searchForm.page < Math.ceil((this.total - 1) / this.searchForm.page_count) ? this.searchForm.page : Math.ceil((this.total - 1) / this.searchForm.page_count)
      this.getDiyList()
    },
    async submitFormInfo (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let form = this.form
          this.$api.addDiy(form).then(res => {
            this.dialogFormVisible = false
            if (res.code === 200) {
              this.$router.push('/diy/edit?id=' + res.data)
            }
          })
        }
      })
    },
    async use (id) {
      let res = await this.$api.openADiy({ diy_id: id })
      this.changeRoutesItem({ key: 'diyID', val: id })
      if (res.code === 200) {
        this.getDiyList()
      }
    },
    selectEditIndex (index, item) {
      this.editIndex = index
      this.editObj = item
    },
    async editTitle (index) {
      let item = this.tableData[index]
      let res = await this.$api.setDiyData({ id: item.id, diy_name: item.diy_name })
      this.editIndex = -1
      if (res.code === 200) {
        this.getDiyList()
      }
    },
    async cancelEditTitle () {
      this.tableData[this.editIndex] = this.editObj
      this.editIndex = -1
    }
  },
  filters: {
    handleTime (val, type) {
      let time = type === 1 ? moment(val * 1000).format('YYYY-MM-DD') : type === 2 ? moment(val * 1000).format('HH:mm:ss') : moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
      return time
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-goods-list {
  width: 100%;
  .page-main {
    width: 100%;
    padding: 20px;

    .el-table {
      img {
        width: 80px;
        height: 80px;
      }
    }
  }
}
</style>
